<template>
	<view style="width: 100%; height: 100%;">
		<view v-if="!isLogin" style="margin: 0 auto;width: 80%;">
			<div style="margin-top: 30px;font-weight: 600;font-size: 25px;">加入岛读</div>
			<view style="display:flex;margin-top: 20px;">
				<input style="border:none;border-bottom:1px solid #888888;width: 100%;height: 100%;" type="text"
					v-model="username" placeholder="账号" />
			</view>
			<view style="display:flex;margin-top: 20px;">
				<input style="border:none;border-bottom:1px solid #888888;width: 100%;height: 100%;" type="password"
					v-model="password" placeholder="密码" />
			</view>
			<button @click="login"
				style="color:white;background-color:#c4a068;width:100%;margin-top: 50px;border-radius: 30px;">登录</button>
		</view>
		<div v-else style="box-sizing: border-box;padding: 20px;">
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;">
				<view style="display: flex; justify-content: space-between;">
					<view>夜间模式</view>
					<view><van-icon name="arrow" /></view>
				</view>
			</view>
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;">
				<view style="display: flex; justify-content: space-between;">
					<view>阅读排版</view>
					<view><van-icon name="arrow" /></view>
				</view>
			</view>
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;">
				<view style="display: flex; justify-content: space-between;">
					<view>语言</view>
					<view><van-icon name="arrow" /></view>
				</view>
			</view>
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;">
				<view style="display: flex; justify-content: space-between;">
					<view>回复通知</view>
					<view><van-icon name="arrow" /></view>
				</view>
			</view>
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;">
				<view style="display: flex; justify-content: space-between;">
					<view>默认启动页</view>
					<view><van-icon name="arrow" /></view>
				</view>
			</view>
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;margin-top: 30px;">
				<view style="display: flex; justify-content: space-between;">
					<view>分享给朋友</view>
					<view><van-icon name="arrow" /></view>
				</view>
			</view>
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;">
				<view style="display: flex; justify-content: space-between;">
					<view>关于</view>
					<view><van-icon name="arrow" /></view>
				</view>
			</view>
			<view style=" border-bottom: 1px solid #f1f1f1; padding: 10px;display: flex; justify-content: center;align-items: center;height: 21px;">
				<view style="font-size: 12px;color: #757575;width: 50px;" @click="logout">
					退出登录
				</view>
			</view>
		</div>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				isLogin: false
			}
		},
		onShow() {
			const loginInfo = uni.getStorageSync('loginInfo');
			if (loginInfo) {
				this.isLogin = true;
			}
		},
		methods: {
			login() {
				if (this.username === 'lbw' && this.password === '123456') {
					uni.setStorageSync('loginInfo', true);
					this.isLogin = true;
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					uni.navigateTo({
						url: '/pages/index3/index3'
					});
				} else if (!/^[a-zA-Z0-9]+$/.test(this.username)) {
					uni.showToast({
						title: '账号不符合规定',
						icon: 'none'
					});
				} else if (!/^[a-zA-Z0-9]+$/.test(this.password)) {
					uni.showToast({
						title: '密码不符合规定',
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '账号或密码错误',
						icon: 'none'
					});
				}
			},
			logout() {
				uni.removeStorageSync('loginInfo');
				this.isLogin = false;
			}
		}
	}
</script>

<style lang="less">
	body {
		width: 100%;
		height: 100%;
	}

	input:focus {
		border-bottom-width: 1.5px;
	}
</style>
